<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
	<head>
		<title>Fiz Sandbox Home</title>
		
		<style>
			#animate {
				position: absolute;
				width: 50px;
				height: 50px;
				background: red;
			}
		</style>
	</head>

	<body>
		<div id="animate"></div>
		
		<div id="main">
			<p class="intro">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
				<a href="http://www.google.com">commodo consequat</a> eiusmod 
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
				minim veniam, quis nostrud exercitation
			</p>

			<p>	
				ullamco laboris nisi ut aliquip ex ea Duis aute irure dolor in 
				reprehend erit in voluptate velit esse cill um dolore eu fugiat 
				nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
				sunt in culpa qui officia deserunt mollit anim id est laborum.
			<p>

			<blockquote>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
				eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
				enim ad minim veniam, quis nostrud exercitation ullamco laboris 
				nisi ut aliquip ex ea commodo consequat.
			</blockquote>

			<div id="summary">
				<table border="1">
					<tr>
						<th>I'm a table header!</th>
						<th>I'm a table header!</th>
					<tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
					<tr>
						<td class="number">$50,000</td>
						<td>salary</td>
					</tr>
				</table>
			</div>
	
			<div id="leftside">
				<ul id="menu">
					<li class="vegtables">vegetables
						<div>
							<ul>
								<li>celery</li>
								<li>carrot</li>
								<li>spinach</li>
							</ul>
						</div>
					</li>

					<li class="fruit active">fruit
						<div>
							<ul>
								<li>apple</li>
								<li>orange</li>
								<li>banana</li>
								<li>kiwi</li>						
							</ul>
						</div>
					</li>
					
					<li class="dairy">dairy
						<div>
							<ul>
								<li>cheese
									<div>
										<ul class="track">
											<li>cheddar</li>
											<li>provolone</li>
											<li>bree</li>
										</ul>
									</div>
								</li>
								<li>milk</li>
								<li>butter</li>			
							</ul>
						</div>
					</li>
					
					<li class="protein">protein
						<div>
							<ul>
								<li>steak</li>
								<li>bacon</li>
								<li>eggs</li>
								<li>almonds</li>
							</ul>
						</div>
					</li>
					<li class="vegtables">vegetables
						<div>
							<ul>
								<li>celery</li>
								<li>carrot</li>
								<li>spinach</li>
							</ul>
						</div>
					</li>
					
					<li class="fruit active">fruit
						<div>
							<ul>
								<li>apple</li>
								<li>orange</li>
								<li>banana</li>
								<li>kiwi</li>						
							</ul>
						</div>
					</li>
					
					<li class="dairy">dairy
						<div>
							<ul>
								<li>cheese
									<div>
										<ul class="track">
											<li>cheddar</li>
											<li>provolone</li>
											<li>bree</li>
										</ul>
									</div>
								</li>
								<li>milk</li>
								<li>butter</li>			
							</ul>
						</div>
					</li>
					
					<li class="protein">protein
						<div>
							<ul>
								<li>steak</li>
								<li>bacon</li>
								<li>eggs</li>
								<li>almonds</li>
							</ul>
						</div>
					</li>
					<li class="vegtables">vegetables
						<div>
							<ul>
								<li>celery</li>
								<li>carrot</li>
								<li>spinach</li>
							</ul>
						</div>
					</li>
					
					<li class="fruit active">fruit
						<div>
							<ul>
								<li>apple</li>
								<li>orange</li>
								<li>banana</li>
								<li>kiwi</li>						
							</ul>
						</div>
					</li>
					
					<li class="dairy">dairy
						<div>
							<ul>
								<li>cheese
									<div>
										<ul class="track">
											<li>cheddar</li>
											<li>provolone</li>
											<li>bree</li>
										</ul>
									</div>
								</li>
								<li>milk</li>
								<li>butter</li>			
							</ul>
						</div>
					</li>
					
					<li class="protein">protein
						<div>
							<ul>
								<li>steak</li>
								<li>bacon</li>
								<li>eggs</li>
								<li>almonds</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<script type="text/javascript" src="../fx/fiz-fx.js"></script>
		<script type="text/javascript">
			//examples
			div = document.getElementById("animate");
			
			div.onclick = function(){
				tween.play(div.style, "marginTop", tween.formulae.easeOut.expo, 0, 375, 30, function(){
					tween.play(div.style, "marginLeft", tween.formulae.easeIn.expo, 0, 800, 50, function(){
						tween.play(div.style, "marginLeft", tween.formulae.easeOut.expo, 800, -200, 50);
					});
				});
			}
		</script>
	</body>
</html>